<template>
	<view>
		<view class="header">
			<view class="bg">
				<view class="box">
					<view class="box-hd">
						<view class="avator">
							<img :src="user.userPhoto">
						</view>
						<view v-show="user.userId!=-1" class="userNickname">{{user.userNickname}}</view>
						<view v-show="user.userId==-1" class="loginOrRegister" @click="gotoLogin">一键登陆/注册</view>
					</view>
					<view class="box-bd">
						<view class="item">
							<view class="icon"><img src="http://192.168.43.54:8002/images/userMain/message.png"></view>
							<view class="text">足迹</view>
						</view>
						<view class="item" @click="goToConcern">
							<view class="icon"><img src="http://192.168.43.54:8002/images/userMain/favorite.png"></view>
							<view class="text">我的收藏</view>
						</view>
						<view class="item" @click="gotoMyApplication">
							<view class="icon"><img src="http://192.168.43.54:8002/images/userMain/service.png"></view>
							<view class="text">我的申请</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="list-content">
			<view class="list">
				<view class="li noborder" >
					<view class="icon"><image src="http://192.168.43.54:8002/images/userMain/card.png"></image></view>
					<view class="text" @click="gotoEditUserInfo">个人资料</view>
					<image class="to" src="http://192.168.43.54:8002/images/userMain/to.png"></image>
				</view>
			</view>
			<view class="list">
				<view class="li " >
					<view class="icon"><image src="http://192.168.43.54:8002/images/userMain/help.png"></image></view>
					<view class="text" @click="gotoAddHouseToSell">发布卖房</view>
					<image class="to" src="http://192.168.43.54:8002/images/userMain/to.png"></image>
				</view>
			</view>
			<view class="list">
				<view class="li noborder" >
					<view class="icon"><image src="http://192.168.43.54:8002/images/userMain/set.png"></image></view>
					<view class="text" @click="gotoAddHouseToRent">发布租房</view>
					<image class="to" src="http://192.168.43.54:8002/images/userMain/to.png"></image>
				</view>
			</view>
			
			<view class="list">
				<view class="li noborder" @click="gotoIndex">
					<view class="icon"><image src="http://192.168.43.54:8002/images/userMain/set.png"></image></view>
					<view class="text">智能推荐</view>
					<image class="to" src="http://192.168.43.54:8002/images/userMain/to.png"></image>
				</view>
			</view>
			
			<view class="list" v-if="user.userType == 1">
				<view class="li noborder" @click="gotoAgent">
					<view class="icon"><image src="http://192.168.43.54:8002/images/userMain/set.png"></image></view>
					<view class="text">中介</view>
					<image class="to" src="http://192.168.43.54:8002/images/userMain/to.png"></image>
				</view>
			</view>
			
			<view class="list" v-else>
				<view class="li" @tap="toBemedium">
					<image class="icon" src="http://192.168.43.54:8002/images/icon/agent/申请.png"></image>
					<view class="text">成为中介</view>
					<image class="to" src="http://192.168.43.54:8002/images/userMain/to.png"></image>
				</view>
			</view>
			
			<view class="list">
				<view class="li noborder" @click="gotoUserEntrust">
					<view class="icon"><image src="http://192.168.43.54:8002/images/userMain/set.png"></image></view>
					<view class="text">房源委托</view>
					<image class="to" src="http://192.168.43.54:8002/images/userMain/to.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapActions } from 'vuex'
	export default {
		data() {
			return {
				// user:{
				// 	userId: null,
				// 	userNickname: "",
				// 	userPassword: "",
				// 	userPhone: "",
				// 	userName: "",
				// 	userSex: 0,
				// 	userPhoto: ""
				// },
				show:true,
				showLoginOrRegister:false,
			}
		},
		methods: {
			...mapActions(['setUser', 'setAgentVerifications']),
			gotoMyApplication(){
				uni.navigateTo({
					url:"/pages/mine/myApplication"
				})
			},
			gotoLogin(){
				uni.navigateTo({
					url:"/pages/mine/login"
				})
			},
			gotoAddHouseToSell(){
				uni.navigateTo({
					url:"/pages/mine/addHouseToSell"
				})
			},
			gotoAddHouseToRent(){
				uni.navigateTo({
					url:"/pages/mine/addHouseToRent"
				})
			},
			toBemedium (){
				uni.navigateTo({
					url: "/pages/agent/bemedium"
				})
			},
			gotoEditUserInfo(){
				this.setUser(this.user)
				if(this.user.userId!=-1){
					uni.navigateTo({
						url:"/pages/mine/editUserInfo",
						// +"?userId="+this.user.userId
						// +"?userNickname="+this.user.userNickname
						// +"?userPassword="+this.user.userPassword
						// +"?userNickname="+this.user.userNickname
						// +"?userPhone="+this.user.userPhone
						// +"?userName="+this.user.userName
						// +"?userSex="+this.user.userSex
						// +"?userPhoto="+this.user.userPhoto
					})
				}
			},
			goToConcern() {
				uni.switchTab({
					url:"/pages/concern/index"
				})
			},
			gotoIndex() {
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			gotoAgent(){
				uni.navigateTo({
					url:"/pages/agent/index"
				})
			},
			gotoUserEntrust() {
				uni.navigateTo({
					url:"/pages/agent/userEntrust"
				})
			}
		},
		onLoad(option){
			if (this.user.userId==-1 || !this.user.userId) {
			    this.show = false;
				this.showLoginOrRegister = true;
				return uni.redirectTo({
				    url: '/pages/mine/login'
				})
			}
			this.$axios.post('selectAgentVerifications', this.qs.stringify({
				userId: this.user.userId
			}))
			.then(res => {
				this.setAgentVerifications(res.data.agentVerifications)
			})
			.catch(err => {
				console.log(err)
			})
		},
		computed:{
			...mapState(['user'])
		},
		mounted() {
			
			// this.$axios.post('deleteUserById',this.qs.stringify({'userId':10009}))
			// .then(res=>{
			// 	console.log(res)
			// })
			// .catch(e=>{
			// 	console.log(e)
			// })
		}
	}
</script>

<style lang="scss">
.page{
	background-color:#f1f1f1;
	font-size: 30upx;
}
.header{
	background: #fff;
	height: 290upx;
	padding-bottom: 110upx;
	.bg{
		width: 100%;
		height:200upx;
		padding-top:100upx;
		background-color: rgb(97,184,241);
	}
}
.box{
	width: 650upx;
	height: 280upx;
	border-radius: 20upx;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 5upx 20upx 0upx rgba(0, 0, 150, .2); 
	.box-hd{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		.avator{
			width: 160upx;
			height: 160upx;
			background: #fff;
			border: 5upx solid #fff;
			border-radius: 50%;
			margin-top: -80upx;
			overflow: hidden;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.userNickname{
			width: 100%;
			text-align: center;
		}
		.loginOrRegister{
			margin-top: 5px;
			width: 100%;
			text-align: center;
			font-size: 12px;
			color: #3881ce;
		}
	}
	.box-bd{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: center;
		.item{
			flex: 1 1 auto;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: center;
			border-right: 1px solid #f1f1f1;
			margin: 15upx 0;
			&:last-child{
				border: none;
			}
			.icon{
				width: 60upx;
				height: 60upx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.text{
				width: 100%;
				text-align: center;
				margin-top: 10upx;
				font-size: 35upx;
				color: #333;
			}
		}
	}
}
.list-content{
	background: #fff;
}
.list{
	width:100%;
	border-bottom:15upx solid  #f1f1f1;
	background: #fff;
	&:last-child{
		border: none;
	}
	.li{
		width:92%;
		height:100upx;
		padding:0 4%;
		border-bottom:1px solid rgb(243,243,243);
		display:flex;
		align-items:center;
	&.noborder{
		border-bottom:0
		}
		.icon{
			flex-shrink:0;
			width:50upx;
			height:50upx;
			image{
				width:50upx;
				height:50upx;
			}
		}
		.text{
			padding-left:20upx;
			width:100%;
			color:#666;
			font-size: 33upx;
		}
		.to{
			flex-shrink:0;
			width:40upx;
			height:40upx;
		}
	}
}
</style>
